DOM (Document Object Model)

• A DOM tree is an in-memory representation of a document.

• DOM trees contain several kinds of nodes, in particular a DocumentType  node, Element  nodes, Text  nodes, Comment  nodes, and in some cases ProcessingInstruction  nodes.

• About :

  • The DOM is a tree representation of the structure of an HTML or XML document loaded in the browser.

  • It allows languages like JavaScript to read, modify, and manipulate the page's content, structure, and style dynamically.

    • Every visual modification via JS uses the DOM.

    • It can be accessed via a bridge from WASM.

  • It provides functions to manipulate structure.

  • W3C standard: documented and supported by all browsers.

• Concept :

  • When the browser loads an HTML file, it builds a tree of objects that reflect the page elements.

  • Each element (like <div> , <p> , <img> , etc.) becomes a node in the tree.

  • The tree starts at document  and continues with document.body , document.body.children , etc.

• Example :

  • HTML:

    <html>
        <body>
            <h1>Hello</h1>
            <p>World</p>
        </body>
    </html>
    

  • Resulting DOM (simplified structure):

    document
    └── html
        └── body
            ├── h1 (text: "Hello")
            └── p  (text: "World")
    

• How it's used :

  • Read :

    let text = document.querySelector("h1").textContent;
    // text = "Hello"
    

  • Modify :

    document.querySelector("p").textContent = "Changed!";
    

  • Create :

    let div = document.createElement("div");
    div.textContent = "New Div";
    document.body.appendChild(div);
    

Virtual DOM (VDOM)

• "Re-render everything and act like it's optimized".